<template>
  <div class="app-container">

    <el-table v-loading.body="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="标题">
        <template slot-scope="scope">
          <router-link :to="'/task/edit/'+scope.row.id" class="link-type">
            <span>{{ scope.row.title }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="发布人">
        <template slot-scope="scope">
          <span>{{ scope.row.releaseUserName }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="修改时间">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="状态" width="110">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" label="操作">
        <template slot-scope="scope">
          <span>
            <el-button @click.native.prevent="deleteRow(scope.$index)">领取任务</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { getUnacceptedListForReceivers, receiveTaskById } from '@/api/task'
export default {
  name: 'ArticleList',
  filters: {
    statusFilter(status) {
      return 'ooooo'
    }
  },
  data() {
    return {
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      temp: {
        id: undefined,
        projectName: 'test',
        sloveSql: 'select * from ',
        crontabExpression: '* * * * *'
      },
      dialogFormVisible: true,
      isGet: true,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getUnacceptedListForReceivers(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      }).catch((err) => {
        console.log(err)
        this.listLoading = false
      })
    },
    deleteRow(index) {
      this.listLoading = true
      const th = this
      receiveTaskById({ id: index, receiverDDId: '111111', receiverName: 'jyhon' }).then(response => {
        console.log(response)
        th.$notify({
          title: '成功',
          message: '任务领取成功',
          type: 'success',
          duration: 2000
        })
        th.list.splice(index, 1)
        th.listLoading = false
      })
      // setTimeout(function() {
      //   th.$notify({
      //     title: '成功',
      //     message: '任务领取成功',
      //     type: 'success',
      //     duration: 2000
      //   })
      //   th.list.splice(index, 1)
      //   th.listLoading = false
      // }, 1000)
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(val)
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
